:root{
  --animation:1s;
  --animation-flash: 0.2s;
}
.animation-flash {
  -webkit-animation: flash var(--animation) var(--animation-flash) ease both;
  -moz-animation: flash var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flash {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@-moz-keyframes flash {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.animation-bounce {
  -webkit-animation: bounce var(--animation) var(--animation-flash) ease both;
  -moz-animation: bounce var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0)
  }

  40% {
    -webkit-transform: translateY(-30px)
  }

  60% {
    -webkit-transform: translateY(-15px)
  }
}

@-moz-keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0)
  }

  40% {
    -moz-transform: translateY(-30px)
  }

  60% {
    -moz-transform: translateY(-15px)
  }
}

.animation-shake {
  -webkit-animation: shake var(--animation) var(--animation-flash) ease both;
  -moz-animation: shake var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes shake {

  0%,
  100% {
    -webkit-transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
  }
}

@-moz-keyframes shake {

  0%,
  100% {
    -moz-transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -moz-transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -moz-transform: translateX(10px);
  }
}

.animation-tada {
  -webkit-animation: tada var(--animation) var(--animation-flash) ease both;
  -moz-animation: tada var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1)
  }

  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg)
  }

  100% {
    -webkit-transform: scale(1) rotate(0)
  }
}

@-moz-keyframes tada {
  0% {
    -moz-transform: scale(1)
  }

  10%,
  20% {
    -moz-transform: scale(0.9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -moz-transform: scale(1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -moz-transform: scale(1.1) rotate(-3deg)
  }

  100% {
    -moz-transform: scale(1) rotate(0)
  }
}

.animation-swing {
  -webkit-animation: swing var(--animation) var(--animation-flash) ease both;
  -moz-animation: swing var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes swing {

  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center
  }

  20% {
    -webkit-transform: rotate(15deg)
  }

  40% {
    -webkit-transform: rotate(-10deg)
  }

  60% {
    -webkit-transform: rotate(5deg)
  }

  80% {
    -webkit-transform: rotate(-5deg)
  }

  100% {
    -webkit-transform: rotate(0deg)
  }
}

@-moz-keyframes swing {

  20%,
  40%,
  60%,
  80%,
  100% {
    -moz-transform-origin: top center
  }

  20% {
    -moz-transform: rotate(15deg)
  }

  40% {
    -moz-transform: rotate(-10deg)
  }

  60% {
    -moz-transform: rotate(5deg)
  }

  80% {
    -moz-transform: rotate(-5deg)
  }

  100% {
    -moz-transform: rotate(0deg)
  }
}


.animation-wobble {
  -webkit-animation: wobble var(--animation) var(--animation-flash) ease both;
  -moz-animation: wobble var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%)
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg)
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg)
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg)
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg)
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg)
  }

  100% {
    -webkit-transform: translateX(0%)
  }
}

@-moz-keyframes wobble {
  0% {
    -moz-transform: translateX(0%)
  }

  15% {
    -moz-transform: translateX(-25%) rotate(-5deg)
  }

  30% {
    -moz-transform: translateX(20%) rotate(3deg)
  }

  45% {
    -moz-transform: translateX(-15%) rotate(-3deg)
  }

  60% {
    -moz-transform: translateX(10%) rotate(2deg)
  }

  75% {
    -moz-transform: translateX(-5%) rotate(-1deg)
  }

  100% {
    -moz-transform: translateX(0%)
  }
}

.animation-pulse {
  -webkit-animation: pulse var(--animation) var(--animation-flash) ease both;
  -moz-animation: pulse var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1)
  }

  50% {
    -webkit-transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1)
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1)
  }

  50% {
    -moz-transform: scale(1.1)
  }

  100% {
    -moz-transform: scale(1)
  }
}

.animation-flip {
  -webkit-animation: flip var(--animation) var(--animation-flash) ease both;
  -moz-animation: flip var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -webkit-animation-timing-function: ease-out
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -webkit-animation-timing-function: ease-out
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in
  }

  80% {
    -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in
  }

  100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in
  }
}

@-moz-keyframes flip {
  0% {
    -moz-transform: perspective(400px) rotateY(0);
    -moz-animation-timing-function: ease-out
  }

  40% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -moz-animation-timing-function: ease-out
  }

  50% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -moz-animation-timing-function: ease-in
  }

  80% {
    -moz-transform: perspective(400px) rotateY(360deg) scale(.95);
    -moz-animation-timing-function: ease-in
  }

  100% {
    -moz-transform: perspective(400px) scale(1);
    -moz-animation-timing-function: ease-in
  }
}


.animation-flip {
  -webkit-animation: flip var(--animation) var(--animation-flash) ease both;
  -moz-animation: flip var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -webkit-animation-timing-function: ease-out
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -webkit-animation-timing-function: ease-out
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in
  }

  80% {
    -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in
  }

  100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in
  }
}

@-moz-keyframes flip {
  0% {
    -moz-transform: perspective(400px) rotateY(0);
    -moz-animation-timing-function: ease-out
  }

  40% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -moz-animation-timing-function: ease-out
  }

  50% {
    -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -moz-animation-timing-function: ease-in
  }

  80% {
    -moz-transform: perspective(400px) rotateY(360deg) scale(.95);
    -moz-animation-timing-function: ease-in
  }

  100% {
    -moz-transform: perspective(400px) scale(1);
    -moz-animation-timing-function: ease-in
  }
}

.animation-flipInX {
  -webkit-animation: flipInX var(--animation) var(--animation-flash) ease both;
  -moz-animation: flipInX var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg)
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg)
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}

@-moz-keyframes flipInX {
  0% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }

  40% {
    -moz-transform: perspective(400px) rotateX(-10deg)
  }

  70% {
    -moz-transform: perspective(400px) rotateX(10deg)
  }

  100% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}


.animation-flipOutX {
  -webkit-animation: flipOutX var(--animation) var(--animation-flash) ease both;
  -moz-animation: flipOutX var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

@-moz-keyframes flipOutX {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }

  100% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

.animation-flipInY {
  -webkit-animation: flipInY var(--animation) var(--animation-flash) ease both;
  -moz-animation: flipInY var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg)
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg)
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1
  }
}

@-moz-keyframes flipInY {
  0% {
    -moz-transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }

  40% {
    -moz-transform: perspective(400px) rotateY(-10deg)
  }

  70% {
    -moz-transform: perspective(400px) rotateY(10deg)
  }

  100% {
    -moz-transform: perspective(400px) rotateY(0deg);
    opacity: 1
  }
}


.animation-flipOutY {
  -webkit-animation: flipOutY var(--animation) var(--animation-flash) ease both;
  -moz-animation: flipOutY var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }
}

@-moz-keyframes flipOutY {
  0% {
    -moz-transform: perspective(400px) rotateY(0deg);
    opacity: 1
  }

  100% {
    -moz-transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }
}

.animation-fadeInUp {
  -webkit-animation: fadeInUp var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInUp var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}

.animation-fadeInDown {
  -webkit-animation: fadeInDown var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInDown var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}

.animation-fadeInLeft {
  -webkit-animation: fadeInLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInLeft var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0)
  }
}

.animation-fadeInRight {
  -webkit-animation: fadeInRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInRight var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0)
  }
}

.animation-fadeInUpBig {
  -webkit-animation: fadeInUpBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInUpBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}

.animation-fadeInUpBig {
  -webkit-animation: fadeInUpBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInUpBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}

.animation-fadeInDownBig {
  -webkit-animation: fadeInDownBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInDownBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}

.animation-fadeInLeftBig {
  -webkit-animation: fadeInLeftBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInLeftBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-moz-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0)
  }
}

.animation-fadeInRightBig {
  -webkit-animation: fadeInRightBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeInRightBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

@-moz-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px)
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0)
  }
}

.animation-fadeOutUp {
  -webkit-animation: fadeOutUp var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutUp var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px)
  }
}

@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-20px)
  }
}

.animation-fadeOutDown {
  -webkit-animation: fadeOutDown var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutDown var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px)
  }
}

@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(20px)
  }
}

.animation-fadeOutLeft {
  -webkit-animation: fadeOutLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutLeft var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px)
  }
}

@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-20px)
  }
}

.animation-fadeOutRight {
  -webkit-animation: fadeOutRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutRight var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px)
  }
}

@-moz-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -moz-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(20px)
  }
}

.animation-fadeOutDownBig {
  -webkit-animation: fadeOutDownBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutDownBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
  }
}

@-moz-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px)
  }
}

.animation-fadeOutUpBig {
  -webkit-animation: fadeOutUpBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutUpBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
  }
}

@-moz-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -moz-transform: translateY(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-2000px)
  }
}

.animation-fadeOutLeftBig {
  -webkit-animation: fadeOutLeftBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutLeftBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px)
  }
}

@-moz-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(-2000px)
  }
}

.animation-fadeOutRightBig {
  -webkit-animation: fadeOutRightBig var(--animation) var(--animation-flash) ease both;
  -moz-animation: fadeOutRightBig var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px)
  }
}

@-moz-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -moz-transform: translateX(0)
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(2000px)
  }
}
.animation-rotateIn {
  -webkit-animation: rotateIn var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateIn var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0
  }

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1
  }
}

@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(-200deg);
    opacity: 0
  }

  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1
  }
}

.animation-rotateInDownLeft {
  -webkit-animation: rotateInDownLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateInDownLeft var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
  }
}

@-moz-keyframes rotateInDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1
  }
}


.animation-rotateInDownRight {
  -webkit-animation: rotateInDownRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateInDownRight var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1
  }
}

@-moz-keyframes rotateInDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1
  }
}

.animation-rotateInUpLeft {
  -webkit-animation: rotateInUpLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateInUpLeft var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
  }
}

@-moz-keyframes rotateInUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1
  }
}

.animation-rotateInUpRight {
  -webkit-animation: rotateInUpRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateInUpRight var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1
  }
}

@-moz-keyframes rotateInUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1
  }
}

.animation-rotateOut {
  -webkit-animation: rotateOut var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateOut var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform: rotate(0);
    opacity: 1
  }

  100% {
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }
}

@-moz-keyframes rotateOut {
  0% {
    -moz-transform: rotate(0);
    opacity: 1
  }

  100% {
    -moz-transform: rotate(-90deg);
    opacity: 0
  }
}

.animation-rotateOutDownLeft {
  -webkit-animation: rotateOutDownLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateOutDownLeft var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }
}

@-moz-keyframes rotateOutDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }
}

.animation-rotateOutDownRight {
  -webkit-animation: rotateOutDownRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateOutDownRight var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }
}

@-moz-keyframes rotateOutDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1
  }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }
}

.animation-rotateOutUpLeft {
  -webkit-animation: rotateOutUpLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateOutUpLeft var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(0);
    opacity: 1
  }

  100% {
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }
}

@-moz-keyframes rotateOutUpLeft {
  0% {
    -moz-transform-origin: left top;
    -moz-transform: rotate(0);
    opacity: 1
  }

  100% {
    -moz-transform-origin: left top;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }
}

.animation-rotateOutUpRight {
  -webkit-animation: rotateOutUpRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: rotateOutUpRight var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right top;
    -webkit-transform: rotate(0);
    opacity: 1
  }

  100% {
    -webkit-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    opacity: 0
  }
}

@-moz-keyframes rotateOutUpRight {
  0% {
    -moz-transform-origin: right top;
    -moz-transform: rotate(0);
    opacity: 1
  }

  100% {
    -moz-transform-origin: right top;
    -moz-transform: rotate(-90deg);
    opacity: 0
  }
}

.animation-hinge {
  -webkit-animation: hinge var(--animation) var(--animation-flash) ease both;
  -moz-animation: hinge var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out
  }

  20%,
  60% {
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out
  }

  40% {
    -webkit-transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out
  }

  100% {
    -webkit-transform: translateY(700px);
    opacity: 0
  }
}

@-moz-keyframes hinge {
  0% {
    -moz-transform: rotate(0);
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out
  }

  20%,
  60% {
    -moz-transform: rotate(80deg);
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out
  }

  40% {
    -moz-transform: rotate(60deg);
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out
  }

  80% {
    -moz-transform: rotate(60deg) translateY(0);
    opacity: 1;
    -moz-transform-origin: top left;
    -moz-animation-timing-function: ease-in-out
  }

  100% {
    -moz-transform: translateY(700px);
    opacity: 0
  }
}


.animation-rollIn {
  -webkit-animation: rollIn var(--animation) var(--animation-flash) ease both;
  -moz-animation: rollIn var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg)
  }
}

@-moz-keyframes rollIn {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%) rotate(-120deg)
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg)
  }
}

.animation-rollOut {
  -webkit-animation: rollOut var(--animation) var(--animation-flash) ease both;
  -moz-animation: rollOut var(--animation) var(--animation-flash) ease both;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg)
  }
}

@-moz-keyframes rollOut {
  0% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg)
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(100%) rotate(120deg)
  }
}

.animation-slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  --animation: 1s;
  --animation-flash: 1s;
  animation-duration: var(--animation);
  -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(8%);
  }

  65% {
    transform: translateY(-4%);
  }

  80% {
    transform: translateY(4%);
  }

  95% {
    transform: translateY(-2%);
  }

  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }

  50% {
    -webkit-transform: translateY(8%);
  }

  65% {
    -webkit-transform: translateY(-4%);
  }

  80% {
    -webkit-transform: translateY(4%);
  }

  95% {
    -webkit-transform: translateY(-2%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}

.animation-slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;

  --animation: 1s;
    --animation-flash: 1s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }

  50% {
    transform: translateY(-8%);
  }

  65% {
    transform: translateY(4%);
  }

  80% {
    transform: translateY(-4%);
  }

  95% {
    transform: translateY(2%);
  }

  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }

  50% {
    -webkit-transform: translateY(-8%);
  }

  65% {
    -webkit-transform: translateY(4%);
  }

  80% {
    -webkit-transform: translateY(-4%);
  }

  95% {
    -webkit-transform: translateY(2%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}


.animation-slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;

  --animation: 1s;
    --animation-flash: 1s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }

  50% {
    transform: translateX(-8%);
  }

  65% {
    transform: translateX(4%);
  }

  80% {
    transform: translateX(-4%);
  }

  95% {
    transform: translateX(2%);
  }

  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }

  50% {
    -webkit-transform: translateX(-8%);
  }

  65% {
    -webkit-transform: translateX(4%);
  }

  80% {
    -webkit-transform: translateX(-4%);
  }

  95% {
    -webkit-transform: translateX(2%);
  }

  100% {
    -webkit-transform: translateX(0%);
  }
}


.animation-slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;

  --animation: 1s;
    --animation-flash: 1s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes slideRight {
  0% {
    transform: translateX(-150%);
  }

  50% {
    transform: translateX(8%);
  }

  65% {
    transform: translateX(-4%);
  }

  80% {
    transform: translateX(4%);
  }

  95% {
    transform: translateX(-2%);
  }

  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-150%);
  }

  50% {
    -webkit-transform: translateX(8%);
  }

  65% {
    -webkit-transform: translateX(-4%);
  }

  80% {
    -webkit-transform: translateX(4%);
  }

  95% {
    -webkit-transform: translateX(-2%);
  }

  100% {
    -webkit-transform: translateX(0%);
  }
}

.animation-slideExpandUp {
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;

    --animation: 1.6s;
      --animation-flash: 1.6s;
      animation-duration: var(--animation);
      -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease -out;

  visibility: visible !important;
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0.5);
  }

  30% {
    transform: translateY(-8%) scaleX(0.5);
  }

  40% {
    transform: translateY(2%) scaleX(0.5);
  }

  50% {
    transform: translateY(0%) scaleX(1.1);
  }

  60% {
    transform: translateY(0%) scaleX(0.9);
  }

  70% {
    transform: translateY(0%) scaleX(1.05);
  }

  80% {
    transform: translateY(0%) scaleX(0.95);
  }

  90% {
    transform: translateY(0%) scaleX(1.02);
  }

  100% {
    transform: translateY(0%) scaleX(1);
  }
}

@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }

  30% {
    -webkit-transform: translateY(-8%) scaleX(0.5);
  }

  40% {
    -webkit-transform: translateY(2%) scaleX(0.5);
  }

  50% {
    -webkit-transform: translateY(0%) scaleX(1.1);
  }

  60% {
    -webkit-transform: translateY(0%) scaleX(0.9);
  }

  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }

  80% {
    -webkit-transform: translateY(0%) scaleX(0.95);
  }

  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }

  100% {
    -webkit-transform: translateY(0%) scaleX(1);
  }
}

.animation-expandUp {
  animation-name: expandUp;
  -webkit-animation-name: expandUp;

  --animation: 0.7s;
    --animation-flash: 0.7s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  visibility: visible !important;
}

@keyframes expandUp {
  0% {
    transform: translateY(100%) scale(0.6) scaleY(0.5);
  }

  60% {
    transform: translateY(-7%) scaleY(1.12);
  }

  75% {
    transform: translateY(3%);
  }

  100% {
    transform: translateY(0%) scale(1) scaleY(1);
  }
}

@-webkit-keyframes expandUp {
  0% {
    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
  }

  60% {
    -webkit-transform: translateY(-7%) scaleY(1.12);
  }

  75% {
    -webkit-transform: translateY(3%);
  }

  100% {
    -webkit-transform: translateY(0%) scale(1) scaleY(1);
  }
}

.animation-bounce1 {
  animation-name: bounce1;
  -webkit-animation-name: bounce1;

    --animation: 1.6s;
    --animation-flash: 1.6s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes bounce1 {
  0% {
    transform: translateY(0%) scaleY(0.6);
  }

  60% {
    transform: translateY(-100%) scaleY(1.1);
  }

  70% {
    transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }

  80% {
    transform: translateY(0%) scaleY(1.05) scaleX(1);
  }

  90% {
    transform: translateY(0%) scaleY(0.95) scaleX(1);
  }

  100% {
    transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

@-webkit-keyframes bounce1 {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
  }

  60% {
    -webkit-transform: translateY(-100%) scaleY(1.1);
  }

  70% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }

  80% {
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
  }

  90% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
  }

  100% {
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

.animation-pulse1 {
  animation-name: pulse1;
  -webkit-animation-name: pulse1;

    --animation: 1.5s;
      --animation-flash: 1.5s;
      animation-duration: var(--animation);
      -webkit-animation-duration: var(--animation-flash);

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse1 {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@-webkit-keyframes pulse1 {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }

  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
}

.animation-bigEntrance {
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;

    --animation: 1.6s;
      --animation-flash: 1.6s;
      animation-duration: var(--animation);
      -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes bigEntrance {
  0% {
    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }

  30% {
    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }

  45% {
    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  60% {
    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  75% {
    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  90% {
    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }

  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }

  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}


.animation-expandOpen {
  animation-name: expandOpen;
  -webkit-animation-name: expandOpen;

    --animation: 1.2s;
      --animation-flash: 1.2s;
      animation-duration: var(--animation);
      -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes expandOpen {
  0% {
    transform: scale(1.8);
  }

  50% {
    transform: scale(0.95);
  }

  80% {
    transform: scale(1.05);
  }

  90% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes expandOpen {
  0% {
    -webkit-transform: scale(1.8);
  }

  50% {
    -webkit-transform: scale(0.95);
  }

  80% {
    -webkit-transform: scale(1.05);
  }

  90% {
    -webkit-transform: scale(0.98);
  }

  100% {
    -webkit-transform: scale(1);
  }
}


.animation-fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;

    --animation: 1.5s;
      --animation-flash: 1.5s;
      animation-duration: var(--animation);
      -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  visibility: visible !important;
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }

  60% {
    transform: scale(1.1);
  }

  80% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }

  60% {
    -webkit-transform: scale(1.1);
  }

  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

.animation-hatch {
  animation-name: hatch;
  -webkit-animation-name: hatch;

  --animation: 2s;
    --animation-flash: 2s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;

  visibility: visible !important;
}

@keyframes hatch {
  0% {
    transform: rotate(0deg) scaleY(0.6);
  }

  20% {
    transform: rotate(-2deg) scaleY(1.05);
  }

  35% {
    transform: rotate(2deg) scaleY(1);
  }

  50% {
    transform: rotate(-2deg);
  }

  65% {
    transform: rotate(1deg);
  }

  80% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes hatch {
  0% {
    -webkit-transform: rotate(0deg) scaleY(0.6);
  }

  20% {
    -webkit-transform: rotate(-2deg) scaleY(1.05);
  }

  35% {
    -webkit-transform: rotate(2deg) scaleY(1);
  }

  50% {
    -webkit-transform: rotate(-2deg);
  }

  65% {
    -webkit-transform: rotate(1deg);
  }

  80% {
    -webkit-transform: rotate(-1deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

.animation-floating {
  animation-name: floating;
  -webkit-animation-name: floating;

  --animation: 1.5s;
    --animation-flash:1.5s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(8%);
  }

  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }

  50% {
    -webkit-transform: translateY(8%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}

.animation-tossing {
  animation-name: tossing;
  -webkit-animation-name: tossing;

  --animation: 2.5s;
    --animation-flash: 2.5s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
  0% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }

  100% {
    transform: rotate(-4deg);
  }
}

@-webkit-keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
  }

  50% {
    -webkit-transform: rotate(4deg);
  }

  100% {
    -webkit-transform: rotate(-4deg);
  }
}
.animation-pullUp {
  animation-name: pullUp;
  -webkit-animation-name: pullUp;

--animation: 1.1s;
  --animation-flash: 1.1s;
  animation-duration: var(--animation);
  -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
  0% {
    transform: scaleY(0.1);
  }

  40% {
    transform: scaleY(1.02);
  }

  60% {
    transform: scaleY(0.98);
  }

  80% {
    transform: scaleY(1.01);
  }

  100% {
    transform: scaleY(0.98);
  }

  80% {
    transform: scaleY(1.01);
  }

  100% {
    transform: scaleY(1);
  }
}

@-webkit-keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.1);
  }

  40% {
    -webkit-transform: scaleY(1.02);
  }

  60% {
    -webkit-transform: scaleY(0.98);
  }

  80% {
    -webkit-transform: scaleY(1.01);
  }

  100% {
    -webkit-transform: scaleY(0.98);
  }

  80% {
    -webkit-transform: scaleY(1.01);
  }

  100% {
    -webkit-transform: scaleY(1);
  }
}


.animation-pullDown {
  animation-name: pullDown;
  -webkit-animation-name: pullDown;

  --animation: 1.1s;
    --animation-flash: 1.1s;
    animation-duration: var(--animation);
    -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }

  40% {
    transform: scaleY(1.02);
  }

  60% {
    transform: scaleY(0.98);
  }

  80% {
    transform: scaleY(1.01);
  }

  100% {
    transform: scaleY(0.98);
  }

  80% {
    transform: scaleY(1.01);
  }

  100% {
    transform: scaleY(1);
  }
}

@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }

  40% {
    -webkit-transform: scaleY(1.02);
  }

  60% {
    -webkit-transform: scaleY(0.98);
  }

  80% {
    -webkit-transform: scaleY(1.01);
  }

  100% {
    -webkit-transform: scaleY(0.98);
  }

  80% {
    -webkit-transform: scaleY(1.01);
  }

  100% {
    -webkit-transform: scaleY(1);
  }
}


.animation-stretchLeft {
  animation-name: stretchLeft;
  -webkit-animation-name: stretchLeft;

--animation: 1.5s;
  --animation-flash: 1.5s;
  animation-duration: var(--animation);
  -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
}

@keyframes stretchLeft {
  0% {
    transform: scaleX(0.3);
  }

  40% {
    transform: scaleX(1.02);
  }

  60% {
    transform: scaleX(0.98);
  }

  80% {
    transform: scaleX(1.01);
  }

  100% {
    transform: scaleX(0.98);
  }

  80% {
    transform: scaleX(1.01);
  }

  100% {
    transform: scaleX(1);
  }
}

@-webkit-keyframes stretchLeft {
  0% {
    -webkit-transform: scaleX(0.3);
  }

  40% {
    -webkit-transform: scaleX(1.02);
  }

  60% {
    -webkit-transform: scaleX(0.98);
  }

  80% {
    -webkit-transform: scaleX(1.01);
  }

  100% {
    -webkit-transform: scaleX(0.98);
  }

  80% {
    -webkit-transform: scaleX(1.01);
  }

  100% {
    -webkit-transform: scaleX(1);
  }
}



.animation-stretchRight {
  animation-name: stretchRight;
  -webkit-animation-name: stretchRight;

  --animation: 1.5s;
  --animation-flash: 1.5s;
  animation-duration: var(--animation);
  -webkit-animation-duration: var(--animation-flash);

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0.3);
  }

  40% {
    transform: scaleX(1.02);
  }

  60% {
    transform: scaleX(0.98);
  }

  80% {
    transform: scaleX(1.01);
  }

  100% {
    transform: scaleX(0.98);
  }

  80% {
    transform: scaleX(1.01);
  }

  100% {
    transform: scaleX(1);
  }
}

@-webkit-keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0.3);
  }

  40% {
    -webkit-transform: scaleX(1.02);
  }

  60% {
    -webkit-transform: scaleX(0.98);
  }

  80% {
    -webkit-transform: scaleX(1.01);
  }

  100% {
    -webkit-transform: scaleX(0.98);
  }

  80% {
    -webkit-transform: scaleX(1.01);
  }

  100% {
    -webkit-transform: scaleX(1);
  }
}

.animation-zoomIn {
  -webkit-animation: zoomIn var(--animation) var(--animation-flash) ease both;
  -moz-animation: zoomIn var(--animation) var(--animation-flash) ease both;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}


.animation-zoomInUp {
  -webkit-animation: zoomInUp var(--animation) var(--animation-flash) ease both;
  -moz-animation: zoomInUp var(--animation) var(--animation-flash) ease both;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.animation-zoomInDown {
  -webkit-animation: zoomInDown var(--animation) var(--animation-flash) ease both;
  -moz-animation: zoomInDown var(--animation) var(--animation-flash) ease both;
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.animation-zoomInLeft {
  -webkit-animation: zoomInLeft var(--animation) var(--animation-flash) ease both;
  -moz-animation: zoomInLeft var(--animation) var(--animation-flash) ease both;
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.animation-zoomInRight {
  -webkit-animation: zoomInRight var(--animation) var(--animation-flash) ease both;
  -moz-animation: zoomInRight var(--animation) var(--animation-flash) ease both;
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.animation-lightSpeedIn {
  -webkit-animation: lightSpeedIn var(--animation) var(--animation-flash) ease both;
  -moz-animation: lightSpeedIn var(--animation) var(--animation-flash) ease both;
}

@keyframes lightSpeedIn {
  0% {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    opacity: 1;
  }
}

.animation-lightSpeedOut {
  -webkit-animation: lightSpeedOut var(--animation) var(--animation-flash) ease both;
  -moz-animation: lightSpeedOut var(--animation) var(--animation-flash) ease both;
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animation-revolve {
    --animation: 5s;
  -webkit-animation:revolve var(--animation) linear infinite;
  -moz-animation: revolve var(--animation) linear infinite;
}

@keyframes revolve {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes revolve {
  0% {
      -webkit-transform: rotate(0deg);
    }
  
    25% {
      -webkit-transform: rotate(90deg);
    }
  
    50% {
      -webkit-transform: rotate(180deg);
    }
  
    75% {
      -webkit-transform: rotate(270deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
    }
}
.animation-counter-clockwise{
      --animation: 5s;
        -webkit-animation: counter-clockwise var(--animation) linear infinite;
        -moz-animation: counter-clockwise var(--animation) linear infinite;
}
@-webkit-keyframes counter-clockwise {
  100% {
    -webkit-transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  25% {
    -webkit-transform: rotate(270deg);
  }

  0% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes counter-clockwise {
  100% {
    -webkit-transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  25% {
    -webkit-transform: rotate(270deg);
  }

  0% {
    -webkit-transform: rotate(360deg);
  }
}
.animation-obliqueangle {
  --animation: 5s;
  animation: obliqueangle var(--animation) linear infinite;
}
@keyframes obliqueangle {
  0% {
    transform: rotateZ(0);
  }

  50% {
    transform: rotateZ(-54deg);
  }

  100% {
    transform: rotateZ(0);
  }
}

.animation-lefthorsepalne {
  -webkit-animation: lefthorsepalne var(--animation) linear infinite;
  animation: lefthorsepalne var(--animation) linear infinite;
  overflow: hidden;
  width: 100%;
}

@keyframes lefthorsepalne {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}
.animation-rigthhorsepalne {
  -webkit-animation: rigthhorsepalne var(--animation) linear infinite;
  animation: rigthhorsepalne var(--animation) linear infinite;
  overflow: hidden;
  width: 100%;
}

@keyframes rigthhorsepalne {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.animation-tophorsepalne {
  -webkit-animation: tophorsepalne var(--animation) linear infinite;
  animation: tophorsepalne var(--animation) linear infinite;
  overflow: hidden;
  width: 100%;
}

@keyframes tophorsepalne {
  0% {
    transform: translateY(100%);
  }
  
  100% {
    transform: translateY(-100%);
  }
}
.animation-bottomhorsepalne {
  -webkit-animation: bottomhorsepalne var(--animation) linear infinite;
  animation: bottomhorsepalne var(--animation) linear infinite;
  overflow: hidden;
  width: 100%;
}

@keyframes bottomhorsepalne {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(100%);
    }
}